<!--
 * @轮子的作者: 轮子哥
 * @Date: 2023-10-13 11:08:18
 * @LastEditTime: 2023-10-25 09:25:50
-->
<template>
    <div class="fuhtml" v-if="!isPreview">
        <div class="top">
            <!--下拉切换-->
            <div class="main">
                <div>{{ $t('text.Contract.l302') }}</div>
                <div>
                    <el-button type="primary" @click="preview"
                        style="width: 85px;height: 30px;background: white;color: #6698ff;">
                        {{ $t('text.Contract.l303') }}
                    </el-button>
                    <el-button type="primary" @click="getHtml" style="width: 85px;height: 30px;">
                        {{ $t("text.House.l144") }}
                    </el-button>
                </div>

            </div>
        </div>

        <CommonInput :hit="$t('text.Contract.l305')" :myStyles="{width:'90%',marginTop: '10px'}"></CommonInput>
        <CommonInput :hit="$t('text.Contract.l306')" :myStyles="{width:'90%',margin: '10px'}"></CommonInput>

        <Toolbar style="border: 1px solid #ccc;width: 90%;" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
        <Editor class="editor" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"
            @onCreated="handleCreated" />
    </div>
    <div v-else class="previewContain">
        <div class="previewHead">
            <div></div>
            <div style="margin-left: 70px;display: flex;">
                <div :class="!isSelect?'defaultSelect':''" @click="changePic"><img src="../../assets/images/h75.svg" class="closeImg" ></div>
                <div :class="isSelect?'defaultSelect':''" @click="changePhone"><img src="../../assets/images/h76.svg" class="closeImg" ></div>
            </div>
            <el-button type="primary" @click="preview" plain style="height: 25px;font-size: 12px;" >退出预览</el-button>
        </div>

        <div v-html="valueHtml" class="contain" :style="containStyle"></div>
    </div>
</template>

<script>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { i18nChangeLanguage } from '@wangeditor/editor'
export default {
    components: { Editor, Toolbar },
    setup() {

        //设置富文本语言
        const language = localStorage.getItem('language')
        if (language == 'en') {
            i18nChangeLanguage('en')
        }
        // 编辑器实例，必须用 shallowRef
        const editorRef = shallowRef()

        // 内容 HTML
        const valueHtml = ref('')

        // 模拟 ajax 异步获取内容
        onMounted(() => {
            // setTimeout(() => {
            //     valueHtml.value = '<p>轮子哥测试</p>'
            // }, 1500)
        })

        const toolbarConfig = {}
        const editorConfig = { placeholder: '请输入内容...', MENU_CONF: {} }

        editorConfig.MENU_CONF['uploadImage'] = {
            server: '/api/upload-image',
            fieldName: 'custom-field-name'
        }

        // 转换图片链接
        function customParseImageSrc(src) {
            if (src.indexOf('http') !== 0) {
                return `http://${src}`
            }
            return src
        }
        // 插入图片
        editorConfig.MENU_CONF['insertImage'] = {
            nInsertedImage(imageNode) {
                if (imageNode == null) return
                const { src, alt, url, href } = imageNode
                console.log('inserted image', src, alt, url, href)
            },
            parseImageSrc: customParseImageSrc, // 也支持 async 函数
        }
        // 编辑图片
        editorConfig.MENU_CONF['editImage'] = {
            onUpdatedImage(imageNode) {
                if (imageNode == null) return

                const { src, alt, url } = imageNode
                console.log('updated image', src, alt, url)
            },
            parseImageSrc: customParseImageSrc, // 也支持 async 函数
        }


        // 组件销毁时，也及时销毁编辑器
        onBeforeUnmount(() => {
            const editor = editorRef.value
            if (editor == null) return
            editor.destroy()
        })

        const handleCreated = (editor) => {
            editorRef.value = editor // 记录 editor 实例，重要！
            console.log(editor.getMenuConfig('uploadImage'))
        }

        //获取html
        const getHtml = () => {
            console.log(editorRef.value.getHtml())
        }

        const isPreview = ref(false)
        //预览
        const preview = () => {
            isPreview.value = !isPreview.value
        }

        const isSelect=ref(false)
        const containStyle=ref({})
        //切换手机
        const changePic = () => {
            isSelect.value=false
            containStyle.value={ width:'100%',height:'100%' }
        }
        //切换电脑
        const changePhone = () => {
            isSelect.value=true
            containStyle.value={ width:'375px',height:'100%',maxHeight: '800px',minHeight: '800px' }
        }
        return {
            editorRef,
            valueHtml,
            mode: 'default', // 或 'simple'
            toolbarConfig,
            editorConfig,
            isPreview,
            isSelect,
            containStyle,
            changePic,
            changePhone,
            getHtml,
            preview,
            handleCreated
        };
    }
}
</script>    

<style scoped>

.defaultSelect{
    background: #ececec;
    height: 25px;
    border-radius: 5px;
    margin-right: 10px;
    padding: 0 5px;
}

.main {
    display: flex;
    align-items: center;
    width: 90%;
    justify-content: space-between;
}

.top {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-bottom: 1px solid rgb(220, 223, 230);
    padding-top: 7px;
    padding-bottom: 7px;
    position: sticky;
    top: 29px;
    background: white;
    z-index: 53;
    box-shadow: 1px 1px 10px 5px #f8f8f8
}

.fuhtml {
    border: 1px solid #ccc;
    height: calc(100% - 1px);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.editor{
    height: 100%;
    flex: 1 1 0%;
    overflow-y: hidden;
    width: 90%;
    border: 1px solid #eee;
    margin-bottom: 30px;
}
.previewContain {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 30px;
    overflow: hidden;
}

.previewHead {
    display: flex;
    justify-content: space-between;
    padding: 0px 30px;
    padding-top: 6px;
    height: 30px;
    margin-bottom: 5px;
    border-bottom: 1px solid #eee;
}

.closeImg {
    width: 25px;
    height: 25px;
}

.contain {
    flex: 1 1 0%;
    border: 1px solid rgb(204, 204, 204);
    margin: 30px;
    margin-top: 0;
    overflow: auto;
    width: 100%;
}
</style>